<template>
  <div class="list">
    <div class="guess">猜你喜欢</div>
    <div class="type">
        <span>综合排序</span>
        <span>距离最近</span>
        <span>销量最高</span>
        <span>筛选</span>
    </div>
    <div class="module">
        <span>年货节热卖</span>
        <span>津贴联盟</span>
        <span>满减优惠</span>
        <span>品质联盟</span>
    </div>
    <div class="shoplist" v-for="(item,index) in tasklist" :key="index">
        <div class="item">
            <img :src="item.pic" alt="">
            <div class="right">
                <div class="name">{{item.name}}</div>
                <div class="count"> <span>⭐️4.3</span> {{item.price}}</div>
                <div class="price">{{item.price}} <span>47分钟 3.9km</span> </div>
                <div class="reco">
                    <span>扬州炒饭棒棒哒</span>
                    <span>海淀区背景菜畅销第2名</span>
                </div>
                <div class="sale">
                    <span>35减12</span>
                    <span>70减35</span>
                    <span>100减45</span>
                    <span>150减60</span>
                </div>
            </div>
        </div>  
    </div>
  </div>
</template>

<script>
import pic1 from "../img/pic5.png";
import pic2 from "../img/pic6.png";
export default {
    data() {
    return{
        tasklist:[
            {pic:pic1,name:'金百万烤鸭（苏家坨店）',count:'月售1632',price:'起送￥20 远距离配送￥3'},
            {pic:pic2,name:'稻香金源饺子店',count:'月售230',price:'起送￥20 配送￥3.5 '}
        ],
        suoyin:0
    }
  }
}
</script>

<style scoped>
    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    input,button{
    border: 0;
    outline:none;
    }
    .list{
        padding: 10px;
    }
    .list .guess{
        font-size: 18px;
        font-weight: bold;
        margin-top: -10px;
    }
    .list .type{
        font-size: 14px;
        display: flex;
        justify-content: space-between;
    }
    .list .module{
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
    }
    .list .module span{
        width: 24%;
        background-color: rgba(229, 227, 227, 0.877);
        color: gray;
        font-size: 14px;
        text-align: center;
    }
    .shoplist .item{
        display: flex;
        margin-top: 10px;
    }
    .shoplist .item img{
        width: 25%;
        margin-right: 10px;
    }
    .shoplist .item .right .name{
        font-size: 16px;
        font-weight: 700;
    }
    .shoplist .item .right .count{
        font-size: 14px;
        color: gray;
    }
    .shoplist .item .right .price{
        font-size: 14px;
        color: gray;
    }
    .shoplist .item .right .reco span{
        color: orangered;
        font-size: 12px;
        background-color: rgba(210, 105, 30, 0.334);
        margin-right: 10px;
    }
    .shoplist .item .right .sale span{
        font-size: 12px;
        border: 1px solid red;
        color: red;
        margin-right: 10px;
    }
</style>